<template>
  <el-drawer
    v-model="visible"
    title="系统通知"
    direction="rtl"
    size="400px"
  >
    <div class="notification-drawer">
      <div v-if="loading" class="notification-loading">
        <el-skeleton v-for="i in 5" :key="i" animated>
          <template #template>
            <el-skeleton-item variant="text" style="width: 60%" />
            <el-skeleton-item variant="text" style="width: 100%" />
            <el-skeleton-item variant="text" style="width: 80%" />
          </template>
        </el-skeleton>
      </div>
      
      <div v-else-if="notifications.length === 0" class="notification-empty">
        <el-empty description="暂无通知" :image-size="80" />
      </div>
      
      <div v-else class="notification-list">
        <div 
          v-for="notification in notifications" 
          :key="notification.id"
          class="notification-item"
          :class="{ unread: !notification.read }"
        >
          <div class="notification-header">
            <div class="notification-title">
              {{ notification.title }}
            </div>
            <el-tag v-if="!notification.read" type="danger" size="small">
              未读
            </el-tag>
          </div>
          
          <div class="notification-content">
            {{ notification.content }}
          </div>
          
          <div class="notification-time">
            {{ formatTime(notification.time) }}
          </div>
          
          <div class="notification-actions">
            <el-button 
              v-if="!notification.read" 
              type="primary" 
              link 
              @click="markAsRead(notification.id)"
            >
              标为已读
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <template #footer>
      <div class="drawer-footer">
        <el-button @click="markAllAsRead">
          全部标为已读
        </el-button>
        <el-button type="primary" @click="refreshNotifications">
          刷新
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface Notification {
  id: string
  title: string
  content: string
  time: string
  read: boolean
}

interface Props {
  modelValue: boolean
  notifications: Notification[]
  loading?: boolean
}

const props = defineProps<Props>()
const emit = defineEmits(['update:modelValue', 'mark-read', 'mark-all-read', 'refresh'])

const visible = ref(false)

watch(() => props.modelValue, (val: boolean) => {
  visible.value = val
})

watch(visible, (val: boolean) => {
  emit('update:modelValue', val)
})

const markAsRead = (id: string) => {
  emit('mark-read', id)
}

const markAllAsRead = () => {
  emit('mark-all-read')
}

const refreshNotifications = () => {
  emit('refresh')
}

const formatTime = (timeString: string) => {
  const date = new Date(timeString)
  return date.toLocaleString('zh-CN')
}
</script>

<style scoped lang="scss">
.notification-drawer {
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .notification-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    
    .el-skeleton {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
  }
  
  .notification-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .notification-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    
    .notification-item {
      padding: 16px;
      border-radius: 8px;
      border: 1px solid #f0f0f0;
      background: #fafafa;
      transition: all 0.3s ease;
      
      &.unread {
        background: #f0f9ff;
        border-color: #e1f3ff;
        
        .notification-header {
          .notification-title {
            font-weight: 600;
          }
        }
      }
      
      .notification-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .notification-title {
          font-weight: 500;
          color: #1f2d3d;
        }
      }
      
      .notification-content {
        font-size: 14px;
        color: #606266;
        line-height: 1.5;
        margin-bottom: 8px;
      }
      
      .notification-time {
        font-size: 12px;
        color: #909399;
        margin-bottom: 8px;
      }
      
      .notification-actions {
        text-align: right;
      }
    }
  }
  
  .drawer-footer {
    display: flex;
    justify-content: space-between;
  }
}
</style>